
<template>
  <div>
    <!-- <a-upload
      v-model:file-list="fileList"
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :headers="headers"
      @change="handleChange"
    >
      <a-button>

        Click to Upload
      </a-button>
    </a-upload> -->

    <!-- <a-upload
      v-model:file-list="fileList"
      name="avatar"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :before-upload="beforeUpload"
      @change="handleChange"
      :multiple="true"
      directory
      :max-count="1"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        alt="avatar"
      />
      <div v-else>
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload> -->
    <a-upload
      v-model:file-list="fileList1"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      list-type="picture"
      :max-count="1"
      :multiple="true"
    >
      <a-button>
        Upload
      </a-button>
    </a-upload>
    <a-upload-dragger
      v-model:file-list="fileList"
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :headers="headers"
      @change="handleChange"
      :progress="progress"
      list-type="picture-card"
    >
      <a-button>
        Click to Upload
      </a-button>
      <!-- <template #itemRender="{ file, actions }">
        <a-space>
          <span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>
          <a
            href="javascript:;"
            @click="actions.download"
          >download</a>
          <a
            href="javascript:;"
            @click="actions.remove"
          >delete</a>
        </a-space>
      </template> -->
      <template #downloadIcon>999</template>
      <template #removeIcon>
        555
      </template>
    </a-upload-dragger>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      fileList: [],
      headers: {
        authorization: 'authorization-text',
      },


      imageUrl: "11",
      fileList1: [{
        uid: '1',
        name: 'xxx.png',
        status: 'done',
        response: 'Server Error 500',
        // custom error message to show
        url: 'http://www.baidu.com/xxx.png',
      }, {
        uid: '2',
        name: 'yyy.png',
        status: 'done',
        url: 'http://www.baidu.com/yyy.png',
      }, {
        uid: '3',
        name: 'zzz.png',
        status: 'error',
        response: 'Server Error 500',
        // custom error message to show
        url: 'http://www.baidu.com/zzz.png',
      }],
      progress:null,
    }
  },
  created() { },
  mounted() {
    this.progress = {
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      strokeWidth: 3,
      format: percent => `${parseFloat(percent.toFixed(2))}%`,
      class: 'test',
    };
  },
  methods: {
    handleChange() {
      console.log('handleChange');

    },
    beforeUpload() {
      console.log('beforeUpload');

    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
